<template>
  <div class="app-container">
    <!-- 条件查询区域开始 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row>
          <!--任务分类 -->
          <el-col :span="6">
            <el-form-item :label="$t('jobInstance.classify')" prop="classify">
              <jmash-select
                v-model="queryParams.classify"
                :data="Dict.jobClassifyDict.values"
                :placeholder="$t('jobInstance.classifyRequired')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
                clearable
              />
            </el-form-item>
          </el-col>
          <!--状态 -->
          <el-col :span="6">
            <el-form-item :label="$t('jobInstance.state')" prop="state">
              <jmash-select
                v-model="queryParams.state"
                :data="Dict.instanceStateEnum.values"
                :placeholder="$t('jobInstance.stateRequired')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="search-btn">
              <!--查询 -->
              <el-button type="primary" @click="tableHooks.handleQuery()">
                {{ $t("common.search") }}
              </el-button>
              <!--重置 -->
              <el-button @click="tableHooks.resetQuery()">{{
                $t("common.reset")
              }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="clear"></div>
    </div>
    <!-- 条件查询区域结束 -->
    <el-card shadow="never" class="table-container">
      <!-- 按钮开始 -->
      <template #header>
        <el-row>
          <el-col :span="24" class="container-float">
            <!-- 固定列表 -->
            <jmash-column-select
              v-model="tableLabel"
              label-name="jobs/job-instance"
            />
          </el-col>
        </el-row>
      </template>
      <!-- 按钮结束 -->
      <!-- 表格开始 -->
      <jmash-table
        ref="multipleTableRef"
        row-key="jobInstancePk"
        :list-loading="listLoading"
        :data="tableData"
        :table-label="tableLabel"
        @selection-change="tableSelected"
        @sort-change="handleSort"
      >
        <!-- 心跳时间 -->
        <template #heartbeat="scope">
          <span>
            {{
              proxy.$moment.formatDate(
                scope.data.row.heartbeat,
                "YYYY-MM-DD HH:mm:ss",
              )
            }}
          </span>
        </template>
        <!-- 过期时间 -->
        <template #dueDate="scope">
          <span>
            {{
              proxy.$moment.formatDate(
                scope.data.row.dueDate,
                "YYYY-MM-DD HH:mm:ss",
              )
            }}
          </span>
        </template>
        <!-- 状态 -->
        <template #state="scope">
          <span>
            {{
              Dict.instanceStateEnum.getEnumValue(
                scope.data.row.state as string,
              )
            }}
          </span>
        </template>
      </jmash-table>
      <template #footer>
        <jmash-pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:current-page="queryParams.curPage"
          v-model:page-size="queryParams.pageSize"
          @pagination="tableHooks.getList()"
        />
      </template>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, type Ref, ref } from "vue";
import { type TableColumn, type TableSort, useTableHooks } from "jmash-core";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { proxy } = getCurrentInstance() as any;
import type {
  JobInstanceReq,
  JobInstanceModel,
} from "@/api/jobs/job-instance/types";
import { jobInstanceApi } from "@/api/jobs/job-instance/index";
import { Dict } from "@/api/jobs/index";
//任务分类
Dict.jobClassifyDict.useValues();
//运行实例状态
Dict.instanceStateEnum.useEnumValues();
const queryParams = ref<JobInstanceReq>({});
const {
  tableHooks,
  multipleTableRef,
  queryFormRef,
  listLoading,
  tableData,
  total,
} = useTableHooks(t, jobInstanceApi, queryParams);
//表格列
let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "jobInstance.instanceName",
    prop: "instanceName",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "jobInstance.classify",
    prop: "classify",
    width: "180",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "jobInstance.heartbeat",
    prop: "heartbeat",
    width: "180",
    sortable: "custom",
    isColumn: true,
    slotName: "heartbeat",
    columnType: "slot",
  },
  {
    label: "jobInstance.dueDate",
    prop: "dueDate",
    width: "180",
    sortable: "custom",
    isColumn: true,
    slotName: "dueDate",
    columnType: "slot",
  },
  {
    label: "jobInstance.state",
    prop: "state",
    width: "90",
    sortable: "custom",
    isColumn: true,
    slotName: "state",
    columnType: "slot",
  },
]);

//行选择
function tableSelected(value: JobInstanceModel[]) {
  tableHooks.selectionRows.value = value;
}

//处理排序
function handleSort(sort: TableSort) {
  tableHooks.handleSort(sort.prop, sort.order);
}

//查询数据.
tableHooks.getList();
</script>
